<template>
	<div>
		<div class="row" v-for="r in state.cabinets" :key="r.id">
			<div v-if="r.cabinetCode == '1'" tip="密集柜">
				<div class="nav">
					<div class="nav-op">
						<span class="title">{{ r.no }}{{ r.name }}</span>
						<span class="op" v-show="state.isShow">
							<i class="el-icon-edit-outline" @click="generateGui(r.id)" title="“编辑柜子信息”"></i>
							<i class="el-icon-circle-plus" title="添加列" @click="addMiGuiCol(r.id)"></i>
							<i class="el-icon-document-copy" title="复制本组密集柜" @click="copyGui(r.id)"></i>
							<i class="el-icon-delete" title="删除" @click="deleteGui(r.id)"></i>
						</span>
					</div>
				</div>
				<div class="gui" :style="[{ width: screenWidth - 220 + 'px' }, { overflow: 'auto' }]">
					<div class="img1" style="float: left"><img src="/images/g3.jpg" /></div>
					<div :style="[{ width: screenWidth - 220 - 94 - 80 + 'px' }, { overflow: 'auto' }]">
						<div :style="{ width: r.columns * 106 + 'px' }">
							<div v v-for="i in r.columns" :key="i" class="img2">
								<img v-if="r.fixedColumn == '1'"
									src="/images/g1.jpg"
									class="mgui"
									@click="
										editDrawer = true;
										state.selectId = r.id;
										state.selectCols = i;
										cabinetCode = r.cabinetCode;
										wz = code + '-' + r.no;
										state.title = r.no + r.name + ',第' + i + '列';
									"
									style="cursor: pointer"
								/>
								<img v-else
									src="/images/g1.jpg"
									class="mgui"
									@click="
										editDrawer = true;
										state.selectId = r.id;
										state.selectCols = (r.columns-i+1);
										cabinetCode = r.cabinetCode;
										wz = code + '-' + r.no;
										state.title = r.no + r.name + ',第' + (r.columns-i+1) + '列';
									"
									style="cursor: pointer"
								/>
								<span class="title" v-if="r.fixedColumn == '1'">{{ i }}</span>
								<span class="title" v-else>{{ r.columns-i+1}}</span>
								<div class="st"></div>
								<div class="dirt" v-if="r.fixedColumn == '1'">
									<i class="el-icon-back" :class="{ hide: i == 1 }"></i>
									<i class="el-icon-right" :class="{ red: i == 1 }"></i>
								</div>
								<div class="dirt" v-else>
									<i class="el-icon-back" :class="{ red: i == r.columns }"></i>
									<i class="el-icon-right" :class="{ hide: i == r.columns }"></i>
								</div>
								<div class="op" v-show="state.isShow" v-if="r.fixedColumn == '1'">
									<i
										class="el-icon-edit-outline"
										@click="
											editDrawer = true;
											state.selectId = r.id;
											state.selectCols = i;
											cabinetCode = r.cabinetCode;
											wz = code + '-' + r.no;
											state.title = r.no + r.name + ',第' + i + '列';
										"
									></i>
									<i class="el-icon-document-copy" @click="copyMiGui(r.id, i)"></i>
									<i class="el-icon-delete" v-if="i== r.columns" @click="deleteMiGui(r.id, i)"></i>
								</div>
								<div class="op" v-show="state.isShow"  v-else>
									<i
										class="el-icon-edit-outline"
										@click="
											editDrawer = true;
											state.selectId = r.id;
											state.selectCols = (r.columns-i+1);
											cabinetCode = r.cabinetCode;
											wz = code + '-' + r.no;
											state.title = r.no + r.name + ',第' + (r.columns-i+1) + '列';
										"
									></i>
									<i class="el-icon-document-copy" @click="copyMiGui(r.id, i)"></i>
									<i class="el-icon-delete" v-if="r.columns-i+1==r.columns" @click="deleteMiGui(r.id, r.columns-i+1)"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col" v-else  tip="非密集柜">
				<div class="ptnav">
					<div class="ptnav-op">
						<span class="pttitle" :title="r.name">{{ r.no }}{{ r.name }}</span>
						<span class="ptop" v-show="state.isShow">
							<i class="el-icon-edit-outline" @click="generateGui(r.id)"></i>
							<i class="el-icon-document-copy" @click="copyGui(r.id)"></i>
							<i class="el-icon-delete" @click="deleteGui(r.id)"></i>
						</span>
					</div>
				</div>
				<div class="ptimg">
					<img :src="'/images/'+r.cabinetCode+'.png'"
						@click="
							state.selectId = r.id;
							editOtherDrawer = true;
							cabinetCode = r.cabinetCode;
							wz = code + '-' + r.no;
							state.title = r.no + r.name;
						"
					/>
				</div>
			</div>
		</div>

		<div class="add" v-show="state.isShow">
			<img src="/images/add.png" style="" @click="generateGui(0)" />
		</div>
		<GuiCreate ref="guiCreate1" @reload="queryCab"></GuiCreate>

		<el-drawer
			v-model="editDrawer"
			:title="title"
			ref="drawerRef"
			direction="rtl"
			size="80%"
			:destroy-on-close="true"
			:before-close="handleClose"
		>
			<EditDraw
				tyname="密集柜"
				:isShow="state.isShow"
				:id="state.selectId"
				:cols="state.selectCols"
				:code="wz"
				:cabinetCode="cabinetCode"
				:isInOut="isInOut"
				v-model:editDrawer="editDrawer"
			/>
		</el-drawer>

		<el-drawer
			v-model="editOtherDrawer"
			:title="title"
			ref="drawerOtherRef"
			direction="rtl"
			size="80%"
			:destroy-on-close="true"
			:before-close="handleClose"
		>
			<EditOtherDraw
				tyname="密集柜以外的柜子"
				:isShow="state.isShow"
				:id="state.selectId"
				:cols="state.selectCols"
				:cabinetCode="cabinetCode"
				:code="wz"
				:isInOut="isInOut"
				v-model:editDrawer="editOtherDrawer"
			/>
		</el-drawer>
	</div>
</template>
<script lang="ts">
import { useStore } from '/@/store/index';
import { ref, toRefs, reactive, computed } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EditDraw from './guiA_Edit.vue';
import EditOtherDraw from './guiOther_Edit.vue';
import GuiCreate from './gui_create.vue';
import { queryById, del, copyCabinets, copyMCabinets, deleteMCabinets, addMCabinetsCol } from '/@/api/store/cabinet';

export default {
	components: { EditDraw, EditOtherDraw, GuiCreate },
	props: { isShow: Boolean, id: Number, code: String, isInOut: Number },
	setup(props, context) {
		const state = reactive({
			screenWidth: document.body.clientWidth,
			guiCreate1: ref(),
			isShow: props.isShow,
			cabinets: null,
			id: props.id,
			selectId: 0,
			selectCols: 0,
			title: '',
			cabinetCode: '',
			code: props.code,
			isInOut: props.isInOut,
			wz: '',
		});
		const editDrawer = ref(false);
		const editOtherDrawer = ref(false);

		const drawerRef = ref();
		const drawerOtherRef = ref();

		queryCab();

		//查询所有区域
		async function queryCab() {
			await queryById(state.id).then((res: any) => {
				if (res.success) {
					state.cabinets = res.data;
				}
			});
		}

		const handleClose = (done: () => void) => {
			ElMessageBox.confirm('您确定要关闭这个页面吗?')
				.then(() => {
					done();
				})
				.catch(() => {
					// catch error
				});
		};

		//添加柜子
		const generateGui = (id: any) => {
			state.guiCreate1.openDialog(
				state.id,
				state.cabinets.find((x) => x.id == id)
			);
		};

		async function addMiGuiCol(id: any) {
			await addMCabinetsCol({ id: id })
				.then((res: any) => {
					if (res.success) {
						queryCab();
						ElMessage({
							message: '操作成功',
							type: 'success',
						});
					}
				})
				.catch(() => {});
		}

		async function deleteMiGui(id: any, col: any) {
			await ElMessageBox.confirm('是否刪除列?')
				.then(() => {
					deleteMCabinets(id, col).then((res: any) => {
						if (res.success) {
							queryCab();
							ElMessage({
								message: '操作成功',
								type: 'success',
							});
						}
					});
				})
				.catch(() => {});
		}

		async function copyMiGui(id: any, col: any) {
			await copyMCabinets(id, col)
				.then((res: any) => {
					if (res.success) {
						queryCab();
						ElMessage({
							message: '操作成功',
							type: 'success',
						});
					}
				})
				.catch(() => {});
		}

		async function copyGui(id: any) {
			await copyCabinets(id)
				.then((res: any) => {
					if (res.success) {
						queryCab();
						ElMessage({
							message: '操作成功',
							type: 'success',
						});
					}
				})
				.catch(() => {});
		}

		async function deleteGui(id: any) {
			await ElMessageBox.confirm('是否刪除?')
				.then(() => {
					del({ id: id }).then((res: any) => {
						if (res.success) {
							queryCab();
							ElMessage({
								message: '操作成功',
								type: 'success',
							});
						}
					});
				})
				.catch(() => {});
		}

		return {
			state,
			deleteGui,
			copyGui,
			copyMiGui,
			queryCab,
			addMiGuiCol,
			deleteMiGui,
			handleClose,
			editDrawer,
			drawerRef,
			generateGui,
			drawerOtherRef,
			editOtherDrawer,
			...toRefs(state),
		};
	},
};
</script>
<style scoped>
.row {
	margin-bottom: 50px;
	border: 0px solid red;
	display: inline-block;
}
.nav {
	padding-left: 94px;
}
.nav-op {
	border-left: 3px solid #409eff;
	height: 30px;
	padding-left: 10px;
	background: rgb(250, 250, 250);
}
.nav-op .title {
	line-height: 30px;
}
.nav-op .op {
	width: 70;
	left: 20px;
	font-size: 18px;
	margin-left: 30px;
}
.nav-op .op i {
	margin-right: 5px;
	color: #409eff;
	cursor: pointer;
}
.gui {
	--height: 349px;
	margin-top: 5px;
	text-align: left;
	overflow: auto;
}
img {
	width: 100%;
}
.img1 {
	width: 94px;
	display: inline-block;
}
.img2 {
	width: 106px;
	display: inline-block;
	position: relative;
}
.img2 .title {
	position: absolute;
	top: 30px;
	right: 0;
	left: 0;
	text-align: center;
}
.img2 .st {
	width: 15px;
	height: 15px;
	border-radius: 100%;
	position: absolute;
	top: 220px;
	left: 45px;
	background-color: #67c23a;
}
.img2 .st.on {
	background: #67c23a;
}
.img2 .dirt {
	position: absolute;
	top: 250px;
	left: 22px;
	font-weight: bold;
	font-size: 30px;
	color: #878787;
}
.img2 .dirt i.hide {
	visibility: hidden;
}
.img2 .dirt i.red {
	color: crimson;
}
.img2 .op {
	position: absolute;
	bottom: 20px;
	width: 70;
	left: 20px;
	font-size: 18px;
}
.img2 .op i {
	margin-right: 5px;
	color: #409eff;
	cursor: pointer;
}

.mgui:hover {
	border: 5px solid red;
	width: 105px;
	height: 350px;
}

.col {
	width: 190px;
	display: inline-block;
	margin: 15px;
}
.ptnav-op {
	border-left: 3px solid #409eff;
	height: 25px;
	padding-left: 10px;
	background: rgb(250, 250, 250);
	display:flex;
}
.ptnav-op .pttitle {
	line-height: 25px;
	flex:1;
	white-space:nowrap;
	overflow: hidden;
}
.ptnav-op .ptop {
	width: 70px;
	left: 20px;
	font-size: 18px;
	margin-left: 5px;
}
.ptnav-op .ptop i {
	margin-right: 5px;
	color: #409eff;
	cursor: pointer;
}
.ptimg {
	width: 190px;
	display: inline-block;
	margin-right: 10px;
	height: 310px;
	cursor: pointer;
}

.ptimg:hover {
	border: 3px solid red;
	width: 192px;
	height: 314px;
}

.add {
	position: fixed;
	right: 45px;
	top: 170px;
	width: 70;
	font-size: 38px;
}
.add img {
	margin-right: 5px;
	width: 100px;
	height: 100px;
	cursor: pointer;
}
</style>
